<template>
    <div ref="chartDom" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'Pie3D',
    props: {
        data: {
            type: Array,
            default: () => [
                { name: '类别1', value: 35 },
                { name: '类别2', value: 25 },
                { name: '类别3', value: 20 },
                { name: '类别4', value: 20 }
            ]
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartDom)

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {d}%'
                },
                legend: {
                    orient: 'vertical',
                    right: '5%',
                    top: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '2.5D饼图',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        startAngle: 45,
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n{d}%',
                            color: '#fff',
                            fontSize: 14
                        },
                        labelLine: {
                            length: 20,
                            length2: 30,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#0C1F31',
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetY: 10
                        },
                        data: this.data.map(item => ({
                            ...item,
                            itemStyle: {
                                ...item.itemStyle,
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowOffsetY: 10
                            }
                        }))
                    },
                    // 底部阴影
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        startAngle: 45,
                        silent: true,
                        z: 0,
                        label: {
                            show: false
                        },
                        itemStyle: {
                            color: 'rgba(0,0,0,0.2)'
                        },
                        data: [{ value: 100 }]
                    }
                ],
                backgroundColor: 'transparent'
            }

            this.chart.setOption(option)
        }
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    }
}
</script>

<style scoped></style>